<template>
    <quill-editor :id="randomId(3)" v-model="content" :ref="editorRef" :options="editorOption" @focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @change="onEditorChange($event)" class="editor" />
</template>
<script>
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css"; // import styles
    import "quill/dist/quill.snow.css"; // for snow theme
    import "quill/dist/quill.bubble.css"; // for bubble theme
    // 自定义的字体和文字大小样式
    import "./quillEditor.css";
    import * as Quill from "quill";
    //quill编辑器的字体
    var fonts = [
        "SimSun",
        "SimHei",
        "Microsoft-YaHei",
        "KaiTi",
        "FangSong",
        "Arial",
        "Times-New-Roman",
        "sans-serif",
    ];
    // 自定义字号的大小
    var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
    var Size = Quill.import("formats/size");
    Size.whitelist = sizes;
    var Font = Quill.import("formats/font");
    Font.whitelist = fonts; //将字体加入到白名单
    Quill.register(Font, true);

    const toolbarOptions = [
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
        ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
        [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
        [{ indent: "-1" }, { indent: "+1" }],
        [{ size: sizes }], // 配置字号
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
        [{ font: fonts }], //显示字体选择
        [{ align: [] }], // 对齐方式-----[{ align: [] }]
        ["clean"], // 清除文本格式-----['clean']
        ["link"], // 链接、图片、视频-----['link', 'image', 'video']
    ];

    export default {
        name: "TestQuillEditor",
        components: { quillEditor },
        props: {
            // 编辑器的内容
            editorContent: {
                type: String,
                required: true,
            },
            editorRef: {
                type: String,
                required: true,
            },
        },
        data() {
            return {
                content: this.editorContent,
                editorOption: {
                    theme: "snow",
                    modules: {
                        toolbar: toolbarOptions,
                    },
                },
            };
        },
        computed: {
            //当前富文本实例
            editor() {
                return this.$refs.editorRef.quillEditor;
            },
        },
        watch: {
            editorContent() {
                this.content = this.editorContent;
            },
        },
        methods: {
            randomId(len) {
                var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
                var tempLen = chars.length,
                    tempStr = "";
                for (var i = 0; i < len; ++i) {
                    tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
                }
                return tempStr;
            },
            // 准备富文本编辑器
            onEditorReady() {},
            // 富文本编辑器 失去焦点事件
            onEditorBlur() {},
            // 富文本编辑器 获得焦点事件
            onEditorFocus() {},
            // 富文本编辑器 内容改变事件
            onEditorChange({ html }) {
                //内容改变事件
                // console.log('内容改变事件');
                this.$emit("input", this.content);
            },
        },
    };
</script>
<style>
</style>